<template>
  <div>
    <el-form :inline="true" size="small" :model="formInline">
      <el-form-item label="作业名称">
        <el-input v-model="formInline.workName" placeholder="请输入" clearable/>
      </el-form-item>
      <el-form-item label="题目类型">
        <el-select v-model="formInline.type" placeholder="请选择" clearable style="width: 100px;">
          <el-option label="题库选择" value="0"/>
          <el-option label="自定义" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="formInline.startTime" type="date" placeholder="请选择" clearable/>
      </el-form-item>
      <el-form-item label="截至时间">
        <el-date-picker v-model="formInline.endTime" type="date" placeholder="请选择" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table ref="singleTableRef" tooltip-effect="dark" :data="tableData" highlight-current-row border stripe
              align="center" size="small" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" align="center" width="80"/>
<!--      <el-table-column v-if="props.type_state === 1" property="score" label="分数" align="center" width="80"/>-->
      <el-table-column
          v-if="props.type_state === 1"
          label="分数"
          align="center"
          width="80"
      >
        <template #default="scope">
          {{ scope.row.score ? scope.row.score : '未批改' }}
        </template>
      </el-table-column>
      <el-table-column property="workName" label="作业名称" align="center"/>
      <el-table-column property="createTime" label=" 发布日期" align="center" width="150">
        <template v-slot="{ row }">
          <div class="content">
            {{ formatData(row.createTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="type" label="作业类型" align="center" width="100">
        <template v-slot="{ row }">
          <div class="content">
            {{ row.type == 0 ? '题库选择' : '自定义' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="deadlineTime" label=" 截至日期" align="center" width="150">
        <template v-slot="{ row }">
          <div class="content">
            {{ formatData(row.deadlineTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="state" label="状态" align="center" width="160">
        <template v-slot="{ row }">
          <div class="content" style="color: #4caf50" v-if="row.state == 0">
            未提交
          </div>
          <div class="content" style="color: #009688" v-if="row.state == 1">
            已提交
          </div>
          <div class="content" style="color: red" v-else-if="row.state == 2">
            过期未提交
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150" v-if="props.type_state != 2">

        <template #default="{ row }">
          <el-button type="success" v-if="props.type_state == 0" size="small"
                     @click="AnswerHomework(row.workId, row.workRecordId, row.type)">答题
          </el-button>
          <el-button type="success" v-if="props.type_state == 1 && row.type == 1" size="small"
                     @click="PreviewHomework(row.workId, row.type, row.workAnswersUrl)">答案
          </el-button>
          <el-button type="success" v-if="props.type_state == 1 && row.type == 0" size="small"
                     @click="PreviewHomework5(row.workId, row.workRecordId)">预览
          </el-button>
          <el-button type="success" v-if="row.type == 1" size="small"
                     @click="PreviewHomework(row.workId, row.type, row.url)">预览作业
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <Pagination @getDate="getJobInfo" :queryNum="queryCount"/>
    </div>
    <SubmitDia v-model:show="show" @onSubmit="onSubmit" :wid="wId"/>
    <!-- 预览自定义文件 -->
    <CustomCorrectionDia v-model:show="showFile" :iframeUrl="iframeUrl"/>
  </div>
</template>

<script setup>

const props = defineProps(['type_state'])

import {ref, reactive} from "vue"
import Pagination from "@/components/base/MyPagination.vue";
import {useRouter} from "vue-router";

const router = useRouter();
import {ElMessage,} from "element-plus";

import {getStudentHomeworkListApi} from "@/api/index";
import useUserInfo from "store/useUserInfo.js";

const useUserInfoStore = useUserInfo();
import {storeToRefs} from 'pinia'

const {userInfo} = storeToRefs(useUserInfoStore)
import SubmitDia from '@/views/student/dialog/SubmitDia'
import CustomCorrectionDia from '@/views/teacher/mycourse/dialog/CustomCorrectionDia'

const MyHomeworkDetail = ref({})
//   获取题库信息  
const info = sessionStorage.getItem("MyHomeworkDetail")

if (!info) {
  router.push({
    name: 'courselist'
  })
} else {
  MyHomeworkDetail.value = JSON.parse(info)
}

// 分页用
const queryCount = ref(1);
const formInline = reactive({
  type: '',
  workName: '',
  startTime: '',
  endTime: ''
})
const loading = ref(false)
const tableData = ref([])
// 格式化时间
const formatData = (cellValue) => {
  var s = new Date(cellValue).toLocaleString();
  return s;
};
const onSubmit = () => {
  queryCount.value += 1;
}
// 获取作业信息
const getJobInfo = async (page) => {
  loading.value = true
  const params = {
    courseId: MyHomeworkDetail.value.id,
    pageNum: page.pageNum,
    pageSize: page.pageSize,
    userId: userInfo.value.userId,
    state: props.type_state
  }
  for (const key in formInline) {
    if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
      params[key] = formInline[key];
    } else if (formInline.time && formInline.time.length !== 0) {
      params.startTime = formInline.time[0];
      params.endTime = formInline.time[1];
    }
  }
  const res = await getStudentHomeworkListApi(params)
  loading.value = false;
  if (res.code !== "10000") {
    ElMessage({
      showClose: true,
      message: res.message,
      type: "error",
    });
    return;
  }
  ElMessage({
    showClose: true,
    message: `查询成功!`,
    type: "success",
  });
  tableData.value = res.data.list || [];
  page.totalCount = res.data.totalCount;
}
const wId = ref(null)
// 答题
const AnswerHomework = (id, wid, type) => {
  if (type == 1) {
    wId.value = wid;
    show.value = true;
    return
  }
  router.push({
    name: "PreviewHomework2", params: {
      id,
      wid,
      type: 1
    }
  });
}
const showFile = ref(false)
const iframeUrl = ref(null)
// 预览作业
const PreviewHomework = (id, t, answerUrl) => {
  if (t == 1) {
    iframeUrl.value = answerUrl;
    showFile.value = true;
    return
  }
  router.push({
    name: "PreviewHomework", params: {
      id,
      type: 3
    }
  });
}
// 预览作业
const PreviewHomework5 = (id, wid) => {
  router.push({
    name: "PreviewHomework2", params: {
      id,
      wid,
      type: 2
    }
  });
}
// 自定义模块
const show = ref(false);

</script>

<style lang="scss" scoped></style>